<template>
	<div class="bar">
		<vue-echart :options="option" class="charts-bar" />
	</div>
</template>

<script>
import baseUrl from '../../plugin/url'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import ECharts from 'vue-echarts'

export default {
	components: {
		VueEchart: ECharts
	},
	data() {
		return {
			option: {},
			seriesData: []
		}
	},
	created() {
		this.optionData()
	},
	mounted() {
		this.getPieData()
	},
	methods: {
		optionData() {
			this.option = {
				color: ['#3AA1FF', '#36CBCB', '#FBD437', '#975FE5', '#F2637B', '#4ECB73', '#FF7D1A', '#E93DB6'],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					show: false
				},
				series: [
					{
						type: 'pie',
						radius: ['35%', '75%'],
						data: this.seriesData,
						label: {
							normal: {
								formatter: '{font|{b}}',
								rich: {
									font: {
										fontSize: 15,
										padding: [5, 0],
										color: '#ffffff'
									}
								}
							}
						},
						labelLine: {
							length: 6,
							length2: 20,
							lineStyle: {
								color: '#ed0992',
								width: 2
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0,0,0,0.5)'
							}
						}
					}
				]
			}
		},
		getPieData() {
			let url = baseUrl + '/web/api/v1/complaint/'
			this.$get(url).then(res => {
				res.data.forEach(res => {
					this.seriesData.push({
						name: res.type,
						value: res.value
					})
				})
			})
		}
	}
}
</script>

<style lang="less" scoped>
.bar {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.charts-bar {
	width: 100%;
	height: 100%;
}
</style>
